<template>
    <div class="content">
        <header>
            我的订单
        </header>

        <h3>未支付订单信息：</h3>
        <ul class="business-info">
            <li v-for="(item,index) in orderslist" :key="index" >
                <div v-if="item.orderState==0">
                    <div class="order-info">
                        <div class="business-info-left" @click="changeshow(item)">
                            <p> {{item.business.businessName}}
                                <i class="fa fa-caret-down"></i>
                            </p>
                        </div>

                        <div class="business-info-right">
                            <p>
                                &#165;{{item.orderTotal}}
                            </p>
                            <div class="order-info-right-icon" @click="topay(item.orderId)">
                                <el-button type="danger" size="small">去支付</el-button>
                            </div>
                        </div>
                    </div>

                    <!-- 订单列表 -->
                    <ul class="order-list" v-show="item.showflag">
                        <li v-for="(detail,index) in item.list" :key="index">
                            <p>{{detail.food.foodName}} x {{detail.quantity}}</p>
                            <p>&#165;{{detail.food.foodPrice}} </p>
                        </li>
                        <li>
                            <p>配送费</p>
                            <p>&#165;{{item.business.deliveryPrice}}</p>
                        </li>
                    </ul>
                </div>
            </li>
        </ul>

        <!-- 已支付部分 -->
        <h3>已支付订单信息：</h3>
        <ul class="business-info">
               <li v-for="(item,index) in orderslist" :key="index">
                <div v-if="item.orderState==1">
                        <div class="order-info">
                            <div class="business-info-left" @click="changeshow(item)">
                                <p> {{item.business.businessName}}
                                    <i class="fa fa-caret-down"></i>
                                </p>
                            </div>

                            <div class="business-info-right">
                                <p>
                                    &#165;{{item.orderTotal}}
                                </p>
                            </div>
                        </div>

                        <!-- 订单列表 -->
                        <ul class="order-list" v-show="item.showflag">
                            <li v-for="(detail,index) in item.list" :key="index">
                                <p>{{detail.food.foodName}} x {{detail.quantity}}</p>
                                <p>&#165;{{detail.food.foodPrice}} </p>
                            </li>
                            <li>
                                <p>配送费</p>
                                <p>&#165;{{item.business.deliveryPrice}}</p>
                            </li>
                        </ul>
                </div>
            </li>
        </ul>


        <!-- 支撑部分 -->
        <div class="footer-top">

        </div>
         <Footer></Footer>
    </div>
</template>

<script>
import Footer from '../components/Footer'
export default {
    name: 'HistoryOrders',
    data(){
        return{
            user:{},
            orderslist:[]
        }
    },
    components:{
        Footer
    },
    created(){
        this.user = this.$getSessionStorage("user");
        //配送页地址列表初始化
        this.$axios
        .get(
          "/OrdersController/listOrdersByUserId/"+this.user.userId
        )
        .then((response) => {
           this.orderslist = response.data.data;
           for(let item of this.orderslist){
                    item.showflag = false;
           }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    methods:{
        topay(orderId){
             this.$router.push({path:'/payment',query:{orderSn:orderId}});
        },
        changeshow(item){
            item.showflag = !item.showflag;
            this.orderslist.sort();
        }
    }
}
</script>


<style scoped>
/* 总容器 */
.content{
    width: 100%;
    height: 100%;
}
/* 头部 */
.content header{
    width: 100%;
    height: 12vw;
    background-color: #0097FF;
    font-size: 4.8vw;
    color: #FFF;
    text-align: center;
    line-height: 12vw;
    position: fixed;
    top: 0vw;
    left: 0vw;
    z-index: 999;
}
.content h3{
    margin-top: 12vw;
    box-sizing: border-box;
    padding: 4vw ;
    font-size: 4vw;
    font-weight: 300;
    color: #999;
}

.content .business-info li .order-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    padding: 2vw 4vw;
    font-size: 4vw;
    color: #666;

}
.content .business-info li .order-info .business-info-left{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.content .business-info li .order-info .business-info-right{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.content .business-info li .order-info .business-info-right div{
    margin-left: 2vw;
    color: #FFF;
    background-color: #F56C6C;
    border-radius: 3px;
}


.content .order-list{
    font-size: 3vw;
    color: #666;
}
.content .order-list li{
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    padding: 1vw 4vw;
}

</style>